import {Layout, Empty, Space, Button} from 'antd';
import {useState} from "react";
import {SiderList} from "./components/SiderList.tsx";
import {ListItem} from "./model/ListItem.ts";

const {Content, Sider} = Layout;
const App = () => {
  const [selectedItem, setSelectedItem] = useState<ListItem>()
  function onItemClick(item: ListItem) {
    setSelectedItem(item)
  }

  return (
    <Layout style={{height: 'calc(100vh - 20px)'}}>
      <Sider width={200} className="site-layout-background" theme={"light"}>
        <SiderList onItemClick={onItemClick}/>
      </Sider>
      <Layout style={{padding: '0', width: '100%'}}>
        <Content style={{ margin: 0, minHeight: 280, width: '100%' }}>
          {!selectedItem && <Empty description={'未选中文件'}/>}
          {selectedItem &&
            <>
              <div style={{height: 'calc(100% - 60px)', width: '100%'}}>
                {selectedItem.content}
              </div>
              <div style={{textAlign: "right", width: '100%', backgroundColor: '#fff', paddingRight: 20}}>
                <Space wrap style={{height: 60}} size={16}>
                  <Button type="default">按钮1</Button>
                  <Button type="primary">按钮2</Button>
                </Space>
              </div>
            </>
          }
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;
